<template>
	<view class="">
		<view class="carBox" v-for="item in content" :key="item.id" @tap.stop="details(item)">
			<view class="boxTop">
				<view class="titleOne">
					<text class="titleBox">{{ item.title }}</text>
					<text style="float: right; color: #949596; font-size: $uni-font-size-custom-b; margin-top: 3px;">{{ item.zuobiao }}</text>
				</view>
				<view class="titleTwo">
					<view style="font-size: $uni-font-size-custom-e;">{{ item.ip }}</view>
					<text style="text-overflow:ellipsis; word-wrap:break-word; color: #606162; font-size: $uni-font-size-custom-b;">{{ item.dizi }}</text>
				</view>
				<view class="titleThree">
					<text class="titleBox">{{ item.wenti }}</text>
					<view style="margin-left: 18px; color: #949596; font-size: $uni-font-size-custom-d;">{{ item.xxwenti }}</view>
				</view>
			</view>
			<view class="boxBottom">
				<button type="default" :plain="true" class="bohuiBtn" @tap.stop="bohui(item)">驳回</button>
				<button type="default" :class="daohanShow(item) ? 'daohanBtn2' : 'daohanBtn'" @tap.stop="goNavigation(item)">
					<!-- :disabled="daohanShow(item)" -->
					<uni-icons style="margin-right: 5px;" :color="daohanShow(item) ? '#9B9B9B' : '#038bff'" type="paperplane" size="18"></uni-icons>
					<text>导航</text>
				</button>
				<button type="default" class="chuliBtn" @tap.stop="chuli(item)">录入处理过程</button>
			</view>
		</view>
		<uni-popup ref="onePopup" type="bottom" :maskClick="false">
			<view class="bohuiBoxBottom">
				<view class="bohuiBoxTop">
					<view class="popupBoxClose" @tap="popupBoxClose">取消</view>
					<view style="color: #040606;">驳回原因</view>
					<view class="popupBoxSubmit" @tap="popupBoxSubmit">确定</view>
				</view>
				<view class="bohuiBottom">
					<textarea
						class="bohuiTextareaBox"
						:value="textareaValue"
						@input="textareaInputs"
						:maxlength="150"
						placeholder-style="color:#9B9B9B"
						placeholder="请填写驳回原因（必填）"
					/>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { toMapAPP } from '@/utils/goMapApps.js';
import { getStorage } from '@/utils/setStorage.js';
export default {
	props: ['content'],
	data() {
		return {
			textareaValue: '',
			bohuiGdbh: ''
		};
	},
	computed: {},
	methods: {
		chuli(val) {
			const obj = {
				type: 1,
				num: 0,
				gdbh: val.gdbh
			};
			this.$emit('change', obj);
		},
		goNavigation(val) {
			if (val.latitude - 0 === 0 && val.longitude - 0 === 0) {
				return false;
			} else {
				return toMapAPP(val.latitude, val.longitude, val.title);
			}
		},
		async popupBoxSubmit() {
			if (this.textareaValue) {
				const user = JSON.parse(getStorage('userconter'));
				const params = {
					GDBH: this.bohuiGdbh,
					CZR_ID: user.id,
					CZNR: this.textareaValue
				};
				const { data: res } = await this.$http(true, 'ywzx/gdjs/FaQiBoHui', params, 'POST');
				if (res.code !== '0000') {
					uni.showToast({
						title: res.message,
						icon: 'none',
						position: 'top'
					});
				} else {
					const obj = {
						type: 2,
						num: 0,
						gdbh: this.bohuiGdbh
					};
					this.$emit('change', obj);
					this.popupBoxClose();
				}
			} else {
				uni.showToast({
					title: '请说明驳回原因！',
					icon: 'none',
					position: 'top'
				});
			}
		},
		details(e) {
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: '/pages/details/index?bh=' + e.gdbh
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/details/index?bh=' + e.gdbh);
			// #endif
		},
		bohui(val) {
			this.bohuiGdbh = val.gdbh;
			this.$refs.onePopup.open();
		},
		// 关闭驳回框
		popupBoxClose() {
			this.$refs.onePopup.close();
			this.textareaValue = '';
		},
		textareaInputs(e) {
			this.textareaValue = e.detail.value;
		},
		daohanShow(val) {
			if (val.latitude - 0 === 0 && val.longitude - 0 === 0) {
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.carBox {
	border-radius: 10px;
	padding: 10px 10px;
	background-color: #ffffff;
	overflow: hidden;
	margin-bottom: 10px;
	.boxTop {
		.titleOne {
			position: relative;
			margin-left: 15px;
		}
		.titleOne::before {
			content: '';
			position: absolute;
			top: 8px;
			left: -15px;
			display: inline-block;
			width: 8px;
			height: 8px;
			background-color: #038bff;
			border-radius: 50%;
			// margin-right: 10px;
		}
		.titleTwo {
			border-left: 1px solid #cccccc;
			margin-left: 3px;
			padding: 0 3px 10px 15px;
		}
		.titleThree {
			position: relative;
			margin-left: 15px;
		}
		.titleThree::before {
			content: '';
			display: inline-block;
			position: absolute;
			top: 8px;
			left: -15px;
			width: 8px;
			height: 8px;
			background-color: #fa5151;
			border-radius: 50%;
			// margin-right: 10px;
		}
	}
	.boxBottom {
		margin-top: 15px;
		display: flex;
		.bohuiBtn {
			height: 40px;
			padding: 0px 20px;
			border: 1px solid #cccccc;
			font-size: $uni-font-size-custom-e;
			border-radius: 5px;
			margin-right: 10px;
		}
		.chuliBtn {
			height: 40px;
			padding: 0px 20px;
			background-color: #038bff;
			color: #ffffff;
			font-size: $uni-font-size-custom-e;
			border-radius: 5px;
		}
		.daohanBtn {
			height: 40px;
			line-height: 40px;
			border: 1px solid #038bff;
			background-color: #ffffff;
			color: #038bff;
			margin-right: 10px;
		}
		.daohanBtn2 {
			height: 40px;
			line-height: 40px;
			border: 1px solid #d8d8d8;
			background-color: #ffffff;
			color: #9b9b9b;
			margin-right: 10px;
		}
	}
}
.titleBox {
	display: inline-block;
	width: 500rpx;
	font-size: $uni-font-size-custom-e;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bohuiBoxBottom {
	height: 200px;
	padding: 15px;
	background-color: #ffffff;
	border-top-right-radius: 5%;
	border-top-left-radius: 5%;
	.bohuiBoxTop {
		display: flex;
		justify-content: space-between;
		.popupBoxClose {
			color: #393939;
		}
		.popupBoxClose:hover {
			color: #038bff;
		}
		.popupBoxSubmit {
			color: #393939;
		}
		.popupBoxSubmit:hover {
			color: #038bff;
		}
	}
	.bohuiBottom {
		margin-top: 25px;
		.bohuiTextareaBox {
			margin: 0 auto;
			background-color: #fafafa;
			border: 1px solid #d8d8d8;
			padding: 10px 10px 0 10px;
		}
	}
}
</style>
